<%--
  Created by IntelliJ IDEA.
  User: DELL
  Date: 2020/9/23
  Time: 17:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>DM3渲染</title>
    <link rel="stylesheet" href="${contextPath}/css/ElementCss/theme/index.css">
    <link rel="stylesheet" href="${contextPath}/css/homeDm3Show.css"/>
    <link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/themes/light/main.css"/>
    <script src="${contextPath}/js/vue.js" type="text/javascript" charset="utf-8"></script>

    <style>
        .esri-ui-bottom-left .esri-ui-corner{
            display: none;
        }
        .eChartsDiv{
            /*margin: 15px;*/
            height: calc(100% - 10px);
            width: calc(100% - 3px);
        }
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>

<div id="viewDiv" v-cloak>
</div>

<div id="main" v-cloak>
    <img style="display: none" id="imageMapNeed"  :src="imageMapNeed">

    <div class="topTitleDiv">
        <div class="dataTitleType" @click="changeType(0)" v-bind:class="{dataTitleTypeSelect: dataType == 0 }">{{language.MeasuredData}}
        </div>
        <div class="dataTitleType" @click="changeType(1)" v-bind:class="{dataTitleTypeSelect: dataType == 1 }">{{language.Simulation}}
        </div>
        <%--小三角形--%>
        <div class="triangle" v-bind:class="{triangleRight: dataType == 1 }"></div>
    </div>
    <div class="fileSelect" v-show="dataType == 1">
        <el-select v-model="fileSelectValue" placeholder="请选择数据类型" class="selectClass">
            <el-option v-for="item in fileSelectOption" :key="item.fileName" :label="item.fileName"
                       :value="item.id">
            </el-option>
        </el-select>
    </div>
    <div class="typeBorder" v-bind:class="{typeBorderMoNi: dataType == 1 }">
        <div class="overflowHidden" v-show="!proShow">
            <div class="proDataUl" v-for="(menu,index) in proData" @click="leftSwitch(menu.proNameen)">
                <li v-bind:class="{liSelect: proDataNow == menu.proNameen }">{{menu.proNameen}}</li>
            </div>
        </div>
        <div class="overflowHidden" v-show="proShow">
            <div class="proDataUl" v-for="(menu,index) in harWorddData" @click="leftSwitch(menu.proNameen)">
                <li v-bind:class="{liSelect: proDataNow == menu.proNameen }">{{menu.proNameen}}</li>
            </div>
        </div>
    </div>
    <%--选择日期--%>
<%--    <el-button class="selectTime" @click="timeSelectDLayerShow=true"> {{language.Select_date}} </el-button>--%>

<%--    <div class="maxShowiv" v-show="maxShow">MAX：{{max}}<br/> MIN：{{min}}</div>--%>
<%--
    <div class="tuli" v-show="tulisShow">
        <ul>
            <li v-for="(menu,index) in tulieData">
                <div class="tulieDiv" v-bind:class="menu.color"></div>
                <span> {{menu.value}}</span></li>
        </ul>
    </div>
--%>
<%--    <div class="coverageButTime">{{timeSilderValueTitle}}</div>--%>
    <%--图层控制--%>
    <div class="coverageBut" @click="layerShow=!layerShow">
        <img src="/img/home/tuceng.png"/>
    </div>
    <div class="tuchengCon" v-show="layerShow">
        <div class="sanjiao"></div>
        <div class="tuchengIitem">
            <div class="layerDiv"  v-for="(menu,index) in tucengData">
<%--                <el-checkbox v-model="menu.value" @change="changeLayer(menu.value,menu.title)"> {{menu.title}}</el-checkbox>--%>
                <el-checkbox v-model="rcxcmodel" @change="choosetuceng(0,rcxcmodel)"> 日常巡查</el-checkbox>
                <el-checkbox v-model="lsdwmodel" @change="choosetuceng(1,lsdwmodel)"> 历史点位</el-checkbox>
            </div>
        </div>
    </div>
<%--    底图切换--%>
    <div class="ditu" @click="changeditu()">
        <span>切换</span>
        <span>底图</span>
    </div>

<%--    <transition name="fade">--%>
<%--    <el-form >--%>
    <div class="popuptab" v-if="popuptab">
            <div id="eChartsDiv" class="eChartsDiv"></div>
            <el-button style="position: absolute;bottom: 5;right: 5;" @click="popuptab = false">关闭</el-button>
        </div>
<%--    </el-form>--%>
<%--    </transition>--%>


    <%--时间弹窗--%>
    <el-dialog :visible.sync="timeSelectDLayerShow" width="40%" :modal="false"	>
        {{language.Select_date}}：
        <el-date-picker
                v-model="selectTimeRange"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="-"
                :start-placeholder="language.start_time"
                :end-placeholder="language.end_time">
        </el-date-picker>


        <div slot="footer" class="dialog-footer">
            <el-button @click="timeSelectDLayerShow = false">{{language.cancel}}</el-button>
            <el-button type="primary" @click="changeTime()"> {{language.sure}}</el-button>
        </div>
    </el-dialog>
</div>

</body>
<script src="${contextPath}/js/echarts.min.js"></script> <!-- 统计图 -->

<script src="${contextPath}/js/elementIndex.js"></script>
<script src="${contextPath}/js/vueApp.js" type="text/javascript" charset="utf-8"></script>
<script src="${contextPath}/js/vue-resource.js"></script>
<script type="text/javascript" src="${contextPath}/js/arcgisOfJs.js"></script>
<%--<script src="https://js.arcgis.com/4.31/"></script>--%>
<script src="${contextPath}/js/language/languages.js" type="text/javascript" charset="utf-8"></script>

<%--公共方法--%>
<script src="${contextPath}/js/homeJS/publicTool.js"></script>
<%--组件 得在实例化前面--%>
<script src="${contextPath}/js/homeJS/component.js"></script>
<%--语言js--%>
<%--<script src="${contextPath}/js/language/vue-i18n.js"></script>--%>


<script src="${contextPath}/js/homeJS/homeDm3Show.js"></script>

</html>
